<template>
  <el-container>
<!--    <el-header >-->
<!--      vue接入v-charts使用教程-->
<!--    </el-header>-->
    <el-main>
      <div style="display: inline; float: left; width: 50%; border: #3b4151 solid 1px">
        <ve-line :data="chartData"  height="300px"></ve-line>
        <ve-histogram :data="chartData_1"  height="300px"></ve-histogram>
      </div>
      <div style="display: inline;float: right; width: 50%; border: #3b4151 solid 1px">
        <ve-pie :data="chartData" height="300px"></ve-pie>
        <ve-radar :data="chartData" height="300px"></ve-radar>
      </div>
    </el-main>
  </el-container>



</template>

<script>
export default {
  name: 'simple',
  data: function () {
    return {
      chartData: {
        columns: ['日期', '材料提交个数'],
        rows: [
          { '日期': '1/1', '材料提交个数': 1393},
          { '日期': '1/2', '材料提交个数': 3530},
          { '日期': '1/3', '材料提交个数': 2923},
          { '日期': '1/4', '材料提交个数': 1723},
          { '日期': '1/5', '材料提交个数': 3792 },
          { '日期': '1/6', '材料提交个数': 4593}
        ]
      },
      // chartData_1: {
      //   columns: ['日期', '访问用户', '下单用户', '下单率'],
      //   rows: [
      //     { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
      //     { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
      //     { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
      //     { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
      //     { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
      //     { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      //   ]
      // },
      // chartData_2: {
      //   columns: ['日期', '访问用户', '下单用户', '下单率'],
      //   rows: [
      //     { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
      //     { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
      //     { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
      //     { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
      //     { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
      //     { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      //   ]
      // }
    }
  }
}
</script>

<style scoped>
.el-header{
  background-color: #1F5DEA;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
}
</style>

